<template>
  <scroll-view
    class="home-list"
    scroll-y
    @scrolltolower="scroll"
    :refresher-triggered="triggered"
    :refresher-threshold="100"
    @refresherrestore="onRestore"
    refresher-enabled
    @refresherrefresh="onRefresh"
    :ower-threshold="0"
  >
    <view
      class="home-list-item"
      :class="'type-' + item.approveStatus"
      v-for="(item, index) in data"
      :key="index"
      @click="itemClick(item)"
    >
      <view class="item-dt">
        <text class="name u-line-1">{{ item.deviceNo }}</text>
        <view class="view">
          <u-tag
            shape="circle"
            :text="item.state"
            :borderColor="getColor(item.state)"
            :bgColor="getColor(item.state)"
          ></u-tag>
          <!-- <uni-icons type="right" size="14" /> -->
        </view>
      </view>
      <view class="item-dd">
        <text class="label">设备型号</text>
        <text class="value">{{ item.deviceSpec }}</text>
      </view>
      <view class="item-dd">
        <text class="label">设备品牌</text>
        <text class="value">{{ item.brand }}</text>
      </view>
      <view class="item-dd">
        <text class="label">产品编号</text>
        <text class="value">{{ item.materialCode }}</text>
      </view>
      <view class="item-dd">
        <text class="label">产品名称</text>
        <text class="value">{{ item.materialName }}</text>
      </view>
      <view class="progress">
        <u-line-progress
          :percentage="item.scheduleRatio"
          activeColor="#3c9cff"
        ></u-line-progress>
      </view>
    </view>
    <view class="loading animation-scale-up" v-if="loading"></view>
    <view class="scroll-no-data" v-if="scrollNoData">已拉到最底部</view>
  </scroll-view>
</template>

<script>
import { setPageData } from "@/store/user";
import { setToken, getToken, getUserInfo, getNotice } from "@/store/user.js";
export default {
  props: {
    data: {
      type: Array,
      default: [],
    },
    scrollNoData: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: true,
      noData: false,
      userInfo: {},
      triggered: false,
    };
  },
  onReady: async function () {
    this.userInfo = await getUserInfo();
  },
  onPullDownRefresh() {
    uni.stopPullDownRefresh();
  },
  methods: {
    getColor(item2) {
      return item2 == "待排产"
        ? "#E5963A"
        : item2 == "已排产"
        ? "#998BF2"
        : item2 == "下发"
        ? "#6BBEE1"
        : item2 == "生产"
        ? "#73D8A6"
        : item2 == "中断"
        ? "#D48B3E"
        : item2 == "暂停"
        ? "#D8BE49"
        : item2 == "完成"
        ? "#4668E2"
        : item2 == "转产中"
        ? "#E794C9"
        : item2 == "转产完成"
        ? "#C25BC6"
        : item2 == "调机中"
        ? "#D8B2F2"
        : item2 == "调机完成"
        ? "#8698F6"
        : item2 == "拆模"
        ? "#EA709F"
        : "#31b099";
    },
    setLoading(val) {
      this.loading = val;
    },
    scroll(e) {
      const that = this;
      if (!that.noData) {
        this.loading = true;
        this.$emit("scrollBottom", (val) => {
          that.noData = val;
          setTimeout(() => {
            this.loading = false;
          }, 400);
        });
      }
    },
    onRefresh() {
      if (this._freshing) return;
      this._freshing = true;
      this.triggered = true;
      this.$emit("onRefresh");
      setTimeout(() => {
        this.triggered = false;
        this._freshing = false;
      }, 1000);
    },
    onRestore() {
      this.triggered = "restore"; // 需要重置
    },
    itemClick(item) {
      // this.$emit("itemClick", item);
      setPageData(item);
      uni.navigateTo({
        url: "/pages/home/device-details?deviceId=" + item.deviceId,
        animationType: "pop-in",
      });
    },
    qrCodeClick(data) {
      // this.$emit("qrCodeClick", item);
      setPageData(data);
      uni.navigateTo({
        url: "/pages/qrCode/index",
        animationType: "pop-in",
      });
    },
    ok(val) {
      this.$emit("ok", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.home-list {
  height: 100%;

  .home-list-item {
    padding-top: 16rpx;
    background-color: #fff;
    box-shadow: 0rpx 5rpx 13rpx 1rpx #e0e0e0;
    margin-bottom: 20rpx;
    border-radius: 10px;
    overflow: hidden;
    position: relative;

    .item-dt {
      padding: 0 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 27rpx;

      .name {
        font-size: 40rpx;
      }

      .view {
        color: #83b4ff;
        display: flex;
        align-items: center;
      }
    }

    .item-dd {
      padding: 0 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
      margin-bottom: 22rpx;

      .label {
        margin-right: 50rpx;
        font-size: 28rpx;
        width: 115rpx;
        min-width: 115rpx;
      }

      .value {
        font-size: 28rpx;
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .btn {
        width: 170rpx;
        min-width: 170rpx;
        margin-left: 29rpx;
        height: 60rpx;
        color: #fff;
        font-size: 24rpx;
      }
    }
  }
  .progress {
    position: absolute;
    right: 10rpx;
    bottom: 56rpx;
    width: 30%;
  }

  .item-bottom {
    height: 64rpx;
    line-height: 64rpx;
    padding: 0 37rpx;
    background-color: #b8c6b7;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .img {
      width: 47rpx;
      height: 37rpx;
      margin-right: 24rpx;
    }
  }

  .scroll-no-data {
    text-align: center;
  }
}
</style>
